<template>
  <div>
    <el-button type="primary" @click="validate">一键校验</el-button>
    <div class="space">
      <el-collapse accordion @change="changeBorehole">
        <el-collapse-item v-for="errorBorehole in errorBoreholes" :title="errorBorehole['wellName']"
                          :name="errorBorehole.id" :key="errorBorehole.id">
          <el-collapse accordion class="inner-collapse">
            <template v-for="expandError in errorExpands">
              <el-collapse-item
                v-if="expandError.list.length"
                :key="expandError.label"
                :title="expandError.label+ '('+expandError.list.length+')'"
                :name="expandError.label"
                class="inner-collapse">
                <div class="collapse-item" v-for="error in expandError.list" :key="error.id">
                  <el-alert
                    class="alert"
                    :closable="false"
                    :description="error['errorInfo']"
                    type="error"
                    show-icon>
                  </el-alert>
                  <el-button type="primary" class="alert-button">修改数据</el-button>
                  <el-button type="danger" class="alert-button">删除数据</el-button>
                </div>
              </el-collapse-item>
            </template>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
    import {validate, getErrorBorehole, getErrorBoreholeById} from '@/api/module/validate'
    import {get} from 'lodash'

    export default {
        name: 'index',
        data() {
            return {
                errorBoreholes: [],
                errorExpands: []
            }
        },
        methods: {
            validate() {
                validate()
            },
            getErrorBorehole() {
                getErrorBorehole().then((res) => {
                    this.errorBoreholes = get(res, 'data.data', [])
                })
            },
            changeBorehole(id) {
                if (id !== '') {
                    getErrorBoreholeById(id).then((res) => {
                        this.errorExpands = get(res, 'data.data', [])
                    })
                }
            }
        },
        mounted() {
            this.getErrorBorehole()
        }
    }
</script>

<style scoped>
  .item {
    margin-right: 30px;
  }

  .space {
    margin-top: 20px;
  }

  .inner-collapse {
    padding: 0 20px;
  }

  .collapse-item {
    display: flex;
    margin-bottom: 10px;
  }

</style>
